<!--
  抽屉弹层

  @author will
  @site https://pt.jdyd.xyz
  @date 2022/04/06 10:14
-->
<template>
  <a-drawer
    v-model:visible="vdata.visible"
    title="支付配置"
    :closable="true"
    :body-style="{ paddingBottom: '80px' }"
    :drawer-style="{ backgroundColor: '#f0f2f5' }"
    width="85%"
    @close="vdata.visible = false"
  >
    <div>
      <!-- 当关闭后需要重新渲染 -->
      <GzPayConfigPanel v-if="vdata.visible" :infoId="vdata.infoId" :configMode="props.configMode" />
    </div>
  </a-drawer>
</template>

<script lang="ts" setup >
import { reactive, defineExpose } from 'vue'


// 定义父组件的传值
const props = defineProps({
  configMode: { type: String, default: '' }, // 支付接口
})

const vdata = reactive({
      visible: false, // 一级抽屉开关
      infoId: null, // infoId

})

// 弹层打开事件
function show (infoId) {

  vdata.infoId = infoId
  vdata.visible = true
}

defineExpose({ show })
</script>
